<template>
  <div class="home">
    <van-nav-bar left-text="患者管理" fixed>
      <template #left> </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 搜索 -->
    <van-search
    class="search"
      shape="round"
      v-model="value"
      placeholder="搜索患者姓名"
      input-align="center"
    ></van-search>
    
    <div class="group" v-for="(item, index) in listGroup" :key="index" @click="changeGroup(index,item.name)">
      <div class="group_icon">{{ item.name.substr(0, 1) }}</div>
      <div class="group_title">
        <div class="group_title_o">{{ item.name }}</div>
        <div>包含{{ item.num }}人</div>
      </div>
    </div>

    <div class="Ungrouped">未分组</div>
    <div class="Ungrouped_box">
      <div
        class="Ungrouped_list"
        v-for="(item, index) in Ungrouped_list"
        :key="index + '1'"
      >
        <div class="Ungrouped_list_l">
          <img src="" alt="" />
        </div>
        <div class="Ungrouped_list_c">
          <div class="Ungrouped_list_c_name">{{ item.name }}</div>
          <div class="Ungrouped_list_c_tags">
            <van-tag round type="primary">{{ item.span[0].tag }}</van-tag>
            <van-tag round type="primary">{{ item.span[1].tag }}</van-tag>
            <van-tag round type="primary">{{ item.span[2].tag }}</van-tag>
          </div>
        </div>
        <div class="Ungrouped_list_r">{{ item.time }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import {moneys,group} from '@/api/demo.js'

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      value: "",
      active: 0,
      listGroup: [ ],
      Ungrouped_list: [ ],
    };
  },
  created() {
  this.demoreq()
  },
  methods: {
    changeGroup(num,name){
      this.$router.push({name:'feiaiGroup', params:{id:num,name:name}})
    },
   async demoreq(){
    const res =  await  moneys()
      this.Ungrouped_list = res
    const result =  await group()
      this.listGroup = result
    }

  },

};
</script>
<style scoped lang='less'>
html,
body {
  height: 100vh;
  .home {
    height: 100vh;
    background-color: #f4f5f7 !important;
   
  }
}

/deep/ .van-nav-bar__content{
  margin-top: .666667rem /* 25/37.5 */;
}

.search {
  margin-top: 1.813333rem /* 68/37.5 */;
}
.sss {
  font-size: 0.426667rem /* 16/37.5 */;
}
.btn {
  font-size: 0.32rem /* 12/37.5 */;
  width: 1.8rem /* 60/37.5 */;
  height: 0.8rem /* 30/37.5 */;
}
/deep/ .van-nav-bar__text {
  color: #000 !important;
  font-size: 0.426667rem /* 16/37.5 */;
}
.group {
  background-color: white;
  width: 100%;
  height: 1.6rem /* 60/37.5 */;
  border-bottom: 1px solid rgba(238, 238, 238, 0.753);
  display: flex;
  align-items: center;
  .group_icon {
    height: 1.066667rem /* 40/37.5 */;
    width: 1.066667rem /* 40/37.5 */;
    margin-left: .4rem /* 15/37.5 */;
    border-radius: 0.266667rem /* 10/37.5 */;
    background-color: #fc9d2d;
    color: white;
    font-size: 0.48rem /* 18/37.5 */;
    text-align: center;
    line-height: 1.066667rem;
  }
  .group_title {
    margin-left: 0.266667rem /* 10/37.5 */;
    text-align: left;
    .group_title_o {
      font-size: 0.373333rem /* 14/37.5 */ !important;
      font-weight: 700;
    }
  }
}
.Ungrouped_box{
  // height: 100%;
  width: 100%;
  // margin-bottom:50px;
  padding-bottom: 50px;
}
.Ungrouped {
  text-align: left;
  margin-left: 0.4rem /* 15/37.5 */;
  margin-bottom: 0.266667rem /* 10/37.5 */;
  margin-top: 0.533333rem /* 20/37.5 */;
}
.Ungrouped_list {
  background-color: #fff;
  height: 1.866667rem /* 70/37.5 */;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .Ungrouped_list_l {
    width: 1.333333rem /* 50/37.5 */;
    height: 1.333333rem /* 50/37.5 */;
    background-color: #fc9d2d;
    border-radius: 0.666667rem /* 25/37.5 */;
    margin-left:.4rem /* 15/37.5 */;
  }
  .Ungrouped_list_c {
    margin-left: 0.4rem /* 15/37.5 */;
    // margin-bottom: .266667rem /* 10/37.5 */;
    width: 56%;
    .Ungrouped_list_c_name {
      font-weight: 700;
      font-size: 0.426667rem /* 16/37.5 */;
      text-align: left;
      margin-bottom: 0.166667rem /* 10/37.5 */;
    }
    @tag-medium-padding:10px 10px;
    .Ungrouped_list_c_tags {
      text-align: left;
      span:first-child {
        background-color: #deebff;
        color: #296afc;
        padding: 3px 5px;
        margin-right: 0.133333rem /* 5/37.5 */;
      }
      span:nth-child(2) {
        background-color: #ffefdc;
        color: #fc9d2d;
        padding: 3px 5px;
        margin-right: 0.133333rem /* 5/37.5 */;
      }
      span:last-child {
        background-color: #ebebfd;
        color: #6163ef;
        padding: 3px 5px;
      }
    }
  }
  .Ungrouped_list_r {
    width: 1.866667rem /* 70/37.5 */;
    margin-right: .4rem /* 15/37.5 */;
  }
}
</style>
